import 'package:flutter_clx_base/flutter_clx_base.dart';

import 'button_public_rect.dart';

class IndustrySelectionWidget extends StatefulWidget {
  const IndustrySelectionWidget({super.key});

  @override
  State<IndustrySelectionWidget> createState() =>
      _IndustrySelectionWidgetState();
}

class _IndustrySelectionWidgetState extends State<IndustrySelectionWidget> {
  // --- State Management ---
  int _selectedCategoryIndex = 1; // 默认选中 "行业有选中的"
  final Set<String> _selectedTags = {'tag1-1'}; // 使用Set来存储选中的标签ID，方便管理

  // --- Mock Data ---
  final List<SideCategory> _categories = [
    SideCategory(id: 'cat1', name: '行业 1', sections: [
      ContentSection(title: '行业标题1', tags: [
        TagItem(id: 'tag1-1', name: '空气站点'),
        TagItem(id: 'tag1-2', name: '河流断面'),
        TagItem(id: 'tag1-3', name: '工业废水'),
        TagItem(id: 'tag1-4', name: '污水处理及其再生利用'),
        TagItem(id: 'tag1-5', name: '工业废气'),
      ]),
    ]),
    SideCategory(id: 'cat2', name: '行业有选中的', sections: [
      ContentSection(title: '行业标题2', tags: [
        TagItem(id: 'tag2-1', name: '空气站点'),
        TagItem(id: 'tag2-2', name: '空气站点'),
        TagItem(id: 'tag2-3', name: '河流断面'),
        TagItem(id: 'tag2-4', name: '工业废水'),
        TagItem(id: 'tag2-5', name: '污水处理及其再生利用'),
        TagItem(id: 'tag2-6', name: '工业废气'),
        TagItem(id: 'tag2-7', name: '工业废气'),
      ]),
    ]),
    SideCategory(id: 'cat3', name: '行业3', sections: [
      ContentSection(title: '行业标题3', tags: [
        TagItem(id: 'tag3-1', name: '空气站点'),
        TagItem(id: 'tag3-2', name: '空气站点'),
        TagItem(id: 'tag3-3', name: '河流断面'),
        TagItem(id: 'tag3-4', name: '工业废水'),
        TagItem(id: 'tag3-5', name: '污水处理及其再生利用'),
        TagItem(id: 'tag3-6', name: '工业废气'),
        TagItem(id: 'tag3-7', name: '工业废气'),
        TagItem(id: 'tag3-8', name: '工业废气'),
      ]),
    ]),
    SideCategory(id: 'cat4', name: '行业选中ing', sections: []),
    SideCategory(id: 'cat5', name: '行业4', sections: [
      ContentSection(title: '行业标题4', tags: [
        TagItem(id: 'tag4-1', name: '测试标签'),
      ]),
    ]),
    SideCategory(id: 'cat6', name: '行业4', sections: []),
    SideCategory(id: 'cat7', name: '行业4', sections: []),
  ];

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
      title: '行业选择',
      body: Column(
        children: [
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 左侧分类导航
                _buildSideNavigationBar(),
                // 右侧内容区域
                _buildContentArea(),
              ],
            ),
          ),
          // 底部按钮栏
          _buildBottomBar(),
        ],
      ),
    );
  }

  // 构建左侧分类导航
  Widget _buildSideNavigationBar() {
    return Container(
      width: 110,
      color: const Color(0xFFF6F7F9),
      child: ListView.builder(
        itemCount: _categories.length,
        itemBuilder: (context, index) {
          final category = _categories[index];
          final isSelected = _selectedCategoryIndex == index;
          return GestureDetector(
            onTap: () {
              setState(() {
                _selectedCategoryIndex = index;
              });
            },
            child: Container(
              color: isSelected ? Colors.white : Colors.transparent,
              padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 选中的蓝色小点
                  if (isSelected)
                    Container(
                      width: 6,
                      height: 6,
                      margin: const EdgeInsets.only(right: 6),
                      decoration: const BoxDecoration(
                        color: Colors.blue,
                        shape: BoxShape.circle,
                      ),
                    ),
                  // 为了对齐，如果未选中则放一个占位符
                  if (!isSelected) const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      category.name,
                      textAlign: isSelected ? TextAlign.left : TextAlign.center,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight:
                            isSelected ? FontWeight.bold : FontWeight.normal,
                        color: isSelected ? Colors.blue : Colors.black87,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  // 构建右侧内容区域
  Widget _buildContentArea() {
    final selectedCategory = _categories[_selectedCategoryIndex];
    return Expanded(
      child: ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemCount: selectedCategory.sections.length,
        itemBuilder: (context, index) {
          final section = selectedCategory.sections[index];
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 区块标题
              Text(
                section.title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 12),
              // 标签流式布局
              Wrap(
                spacing: 10.0, // 水平间距
                runSpacing: 10.0, // 垂直间距
                children:
                    section.tags.map((tag) => _buildTagItem(tag)).toList(),
              ),
              const SizedBox(height: 24),
            ],
          );
        },
      ),
    );
  }

  // 构建单个标签项
  Widget _buildTagItem(TagItem tag) {
    final isSelected = _selectedTags.contains(tag.id);
    return GestureDetector(
      onTap: () {
        setState(() {
          if (isSelected) {
            _selectedTags.remove(tag.id);
          } else {
            _selectedTags.add(tag.id);
          }
        });
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: isSelected
              ? Colors.blue.withOpacity(0.1)
              : const Color(0xFFF6F7F9),
          borderRadius: BorderRadius.circular(6.0),
          border: Border.all(
            color: isSelected ? Colors.blue : Colors.transparent,
            width: 1,
          ),
        ),
        child: Text(
          tag.name,
          style: TextStyle(
            fontSize: 13,
            color: isSelected ? Colors.blue : Colors.black87,
          ),
        ),
      ),
    );
  }

  // 构建底部按钮栏
  Widget _buildBottomBar() {
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 12, 16, 24), // 底部增加padding以避开系统导航栏
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            spreadRadius: 0,
            blurRadius: 10,
            offset: const Offset(0, -5),
          ),
        ],
      ),
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: ButtonPublicRect(
              text: "重置",
              type: ButtonPublicType.outline,
              onPressed: _onReset,
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            flex: 3,
            child: ButtonPublicRect(
              minWidth: double.infinity,
              text: "确认",
              onPressed: _onConfirm,
            ),
          ),
        ],
      ),
    );
  }

  void _onReset() {
    setState(() {
      _selectedTags.clear();
    });
  }

  void _onConfirm() {
    // 这里可以处理确认逻辑，比如返回选中的标签等
    logger.d("Selected Tags: $_selectedTags");
    Get.back(); // 关闭当前页面
  }
}

class TagItem {
  final String id;
  final String name;
  TagItem({required this.id, required this.name});
}

// 用于表示右侧的一个内容区块（标题 + 一组标签）
class ContentSection {
  final String title;
  final List<TagItem> tags;
  ContentSection({required this.title, required this.tags});
}

// 用于表示左侧的一个分类
class SideCategory {
  final String id;
  final String name;
  final List<ContentSection> sections;
  SideCategory({required this.id, required this.name, required this.sections});
}
